/**
 * umi-request--默认请求
 * @description 使用 connect 获取models中的数据,请求类为：umi-request
 * @author SPY
 * @date 2020/04/11
 */

import React, { useEffect } from 'react';
import { connect, useStore } from 'umi';
import { Card, Row, Col, Avatar, Button, Spin } from 'antd';
import {
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined,
} from '@ant-design/icons';

const { Meta } = Card;

const useRequestPage = (props: any) => {
  const { dispatch, cardList, loading } = props;

  // const { getState } = useStore();

  // console.log('store', getState().umiHooks);

  useEffect(() => {
    fetchCardList();
  }, []);

  // 请求数据
  const fetchCardList = () => {
    dispatch({
      type: 'umiHooks/fetchList',
      payload: {
        results: 10,
        inc: 'name,email,picture,login',
      },
    });
  };

  // 渲染card列表
  const renderCardList = (item: any) => {
    return (
      <Col key={item.login.uuid} span={6}>
        <Card
          key={item.login.uuid}
          style={gridStyle}
          actions={[
            <SettingOutlined key="setting" />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<Avatar src={item.picture.large} />}
            title={item.name.first}
            description={`${item.email}`}
          />
        </Card>
      </Col>
    );
  };

  const gridStyle: React.CSSProperties = {
    width: '100%',
    textAlign: 'center',
    borderRadius: 10,
  };

  return (
    <Row justify="center">
      <Col span={16}>
        <Card
          title="默认请求"
          type="inner"
          extra={
            <Button type="link" onClick={fetchCardList}>
              换一批
            </Button>
          }
        >
          <Spin spinning={loading}>
            <Row justify="start" gutter={[24, 24]}>
              {cardList.map(renderCardList)}
            </Row>
          </Spin>
        </Card>
      </Col>
    </Row>
  );
};

useRequestPage.title = 'connect 用法';

export default connect(({ umiHooks, loading }: any) => ({
  cardList: umiHooks.cardList,
  loading: loading.effects['umiHooks/fetchList'],
}))(useRequestPage);
